<template>
  <div class="container-data">
    <mapOl :ishiddenConference="false" />
    <div class="emergency" ref="emergency">
      <div id="title" class="leftHeader">
        <div class="leftTitle">
          <span class="titleText">{{
            isShowCommand ? "指挥调度" : "事件管理"
          }}</span>
        </div>
        <div>
          <i class="el-icon-close" @click="close"></i>
        </div>
      </div>
      <div class="leftContent" v-if="!isShowCommand">
        <div class="form-div">
          <el-form ref="form" :model="form" label-width="120px">
            <el-form-item label="今日事件数量:">
              <el-input v-model="form.todayCount" readonly></el-input>
            </el-form-item>
            <el-form-item label="历史事件数量:">
              <el-input
                v-model="form.historyCount"
                type="number"
                readonly
              ></el-input>
            </el-form-item>
            <el-form-item label="地质灾害事件:">
              <el-input
                v-model="form.geologyCount"
                type="number"
                readonly
              ></el-input>
            </el-form-item>
            <el-form-item label="山洪灾害事件:">
              <el-input
                v-model="form.floodCount"
                type="number"
                readonly
              ></el-input>
            </el-form-item>
          </el-form>
        </div>

        <div class="center-table">
          <div class="search">
            <el-row>
              <el-col :span="16">
                <el-input
                  placeholder="请输入事件名称"
                  v-model="keywords"
                  clearable
                  @clear="getTable"
                  class="input-with-select"
                  size="small"
                >
                  <div slot="append" class="inputbtn" @click="getTable">
                    <i class="el-icon-search"></i>
                  </div>
                </el-input>
              </el-col>
              <el-col :span="8">
                <el-button
                  style="margin-left: 10px; height: 40px"
                  type="primary"
                  size="small"
                  @click="addEvent"
                  v-hasPermi="['emergency:event:add']"
                  ><i class="el-icon-plus"></i
                ></el-button>
                <el-button
                  :disabled="multipleSelection&&multipleSelection.length<=0"
                  style="margin-left: 10px; height: 40px"
                  type="danger"
                  size="small"
                  @click="remove"
                  v-hasPermi="['emergency:event:remove']"
                  ><i class="el-icon-delete"></i
                ></el-button>
              </el-col>
            </el-row>
          </div>
          <el-table
            class="table"
            :header-cell-style="{
              textAlign: 'center',
              color: '#A3B3BE',
              fontSize: '0.78125vw',
            }"
            :cell-style="{
              textAlign: 'center',
              fontSize: '0.78125vw',
              color: '#fff',
            }"
            ref="multipleTable"
            :data="tableData"
            @selection-change="handleSelectionChange"
            @row-click="rowClick"
            style="width: 100%"
          >
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>
            <el-table-column
              type="index"
              width="50"
              :show-overflow-tooltip="true"
              align="center"
              label="序号"
            >
            </el-table-column>
            <el-table-column
              prop="name"
              align="center"
              :show-overflow-tooltip="true"
              label="事件名称"
            >
            </el-table-column>
            <el-table-column
              prop="occurTime"
              align="center"
              :show-overflow-tooltip="true"
              label="发生时间"
            >
            </el-table-column>
            <el-table-column
              prop="location"
              align="center"
              :show-overflow-tooltip="true"
              label="发生位置"
            >
            </el-table-column>
            <el-table-column
              prop="eventType"
              align="center"
              :show-overflow-tooltip="true"
              label="事件类型"
            >
              <template slot-scope="scope">
                <span>{{
                  scope.row.eventType === "1" ? "地质灾害事件" : "山洪灾害事件"
                }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="level"
              align="center"
              :show-overflow-tooltip="true"
              label="等级"
            >
            </el-table-column>
            <el-table-column
              prop="submitUnit"
              align="center"
              :show-overflow-tooltip="true"
              label="报送单位"
            >
            </el-table-column>
            <el-table-column label="操作" width="120">
              <template slot-scope="scope">
                <el-button type="text" @click.stop="edit(scope.row)" v-hasPermi="['emergency:event:edit']">编辑</el-button>
                <el-button type="text" @click.stop="remove(scope.row)" v-hasPermi="['emergency:event:remove']">删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pagination">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
      <div class="leftContent command" v-else>
        <el-button
          type="primary"
          icon="el-icon-arrow-left"
          size="mini"
          style="margin-right: 10px; margin-top: 10px"
          @click="goback"
          >返回</el-button
        >
        <div class="title-two">
          <div class="line"></div>
          事件信息
        </div>
        <el-form ref="form" :model="form" label-width="120px">
          <el-form-item label="事件">
            <el-input v-model="form.name" readonly></el-input>
          </el-form-item>
          <el-form-item label="影响半径(m)">
            <el-input v-model.number="form.radius" type="number"></el-input>
          </el-form-item>
          <div class="btn">
            <el-button size="small"
              type="primary"
              @click="assess"
              >评估</el-button
            >
            <el-button size="small"
              type="danger"
              @click="clear"
              >清除</el-button
            >
          </div>
        </el-form>
      </div>
      <div class="leftContent contentCenter" v-if="isShowAssess">
        <div class="title-two">
          <div class="line"></div>
          资源信息
        </div>
        <div class="content-table">
          <table class="table bt" cellpadding="0" cellspacing="0">
            <thead style="position: sticky; top: 0">
              <tr class="tr">
                <td class="td">名称</td>
                <td class="td">距离</td>
                <td class="td">操作</td>
              </tr>
            </thead>
          </table>
        </div>
        <div class="content-table table-tbody">
          <table class="table tbody" cellpadding="0" cellspacing="0" v-if="dataListInfo&&dataListInfo.length > 0">
            <tbody>
              <div v-for="item,index in dataListInfo" :key="index" class="box">
                <div class="box-key" @click="luxianClick(index)"><i ref="icon" class="el-icon-caret-bottom"></i>{{item.key}}</div>
                <div ref="luxianRef" class="allBox">
                  <div v-for="items,indexs in item.value" :key="indexs" class="box-value" >
                    <div class="name">{{items.name}}</div>
                    <div class="distance">{{items.distance}}m</div>
                    <div class="luxian" @click="generatingRoute(items)">生成路线</div>
                  </div>
                </div>
              </div>
            </tbody>
          </table>
          <p v-else style="color: #fff;text-align: center;line-height: 0.3rem;">暂无数据</p>
        </div>
      </div>
      <div v-if="isShowCommand" class="leftContent contentbto">
        <div class="title-two">
          <div class="line"></div>
          应急标绘
        </div>
        <div class="bto-huizhi">
          <div
            class="huizhi"
            v-for="(item, index) in huizhiDataList"
            :key="index"
            @click="plotting(item.text)"
          >
            <img :src="item.img" alt="" />
            <p>{{ item.text }}</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 行政区域搜索 -->
    <div class="search-input">
      <el-select
        v-model="value1"
        class="m-2"
        placeholder="请选择区县"
        size="small"
        style="margin-right: 0.1rem"
        @change="selectChange"
        clearable
      >
        <el-option
          v-for="item in options1"
          :key="item.adcode"
          :label="item.areaName"
          :value="item.adcode"
        />
      </el-select>
      <el-select
        v-model="value2"
        class="m-2"
        placeholder="请选择乡镇"
        size="small"
        clearable
        @change="selectChangeRegion"
      >
        <el-option
          v-for="item in options2"
          :key="item.adcode"
          :label="item.areaName"
          :value="item.adcode"
        />
      </el-select>
      <el-button type="primary" class="inputbtn btn-inputbtn" icon="el-icon-search" @click="searchBtn"></el-button>
      <!-- <el-input
        placeholder="请输入行政区域"
        height="40"
        v-model="addvcd"
        class="input-with-select"
        size="small"
        clearable
      >
        <div slot="append" class="inputbtn"><i class="el-icon-search"></i></div>
      </el-input> -->
    </div>
    <div class="right-arrow" v-if="isShowArrow" @click="showLeftContent">
      <i class="el-icon-arrow-right"></i>
    </div>
    <addEventVisible
      v-if="addEventDialog"
      :title="title"
      :rowData="rowData"
      :addEventDialog="addEventDialog"
      @handleClose="handleClose"
    />
    <div class="lengend">
      <div class="title">图例</div>
      <el-checkbox-group v-model="checkList">
        <el-checkbox
          label="1"
          @change="
            ($event) => {
              checkboxGroup($event, 1);
            }
          "
          ><img width="30px" src="@/assets/img/dizhi.png" alt="" />
          地质灾害事件</el-checkbox
        >
        <el-checkbox
          label="2"
          @change="
            ($event) => {
              checkboxGroup($event, 2);
            }
          "
          ><img
            width="30px"
            src="@/assets/img/shanhong.png"
            alt=""
          />山洪灾害事件</el-checkbox
        >
      </el-checkbox-group>
    </div>
    <div class="popups" id="popups">
      <div class="title-top">
        <p class="left">信息详情</p>
        <i class="el-icon-close" @click="closeOverlay"></i>
      </div>
      <div class="center">
        <p class="name">
          事件名称：{{lonlat.事件名称}}
        </p>
        <p class="name">报送时间：{{lonlat.发生时间}}</p>
        <p class="name">发生位置：{{lonlat.发生位置}}</p>
        <p class="name">事件类型：{{lonlat.事件类型}}</p>
        <p class="name">事件等级：{{lonlat.事件等级}}</p>

        <el-button
          style="width: 100%"
          size="small"
          type="primary"
          @click="command"
          >指挥调度</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import mapOl from '../../components/mapOl/index.vue'
import addEventVisible from './addEventVisible.vue'
import * as mapUtils from '@/components/mapOl/mapUtils'
import dizhi from '@/assets/img/dizhi.png'
import shanhong from '@/assets/img/shanhong.png'
import { Bus } from '@/utils/eventBus'
import Overlay from 'ol/Overlay'
import * as API from '../../api/emergency/index'
import * as resourceAPI from '../../api/dataResource/index'
var pointDiv
export default {
  components: { mapOl, addEventVisible },
  data() {
    return {
      options1: [],
      geomText: null,
      options2: [],
      value1: '',
      value2: '',
      activeIndex: null,
      isShow: true,
      multipleSelection: [],
      addvcd: '', // 行政区域
      lonlat: [],
      huizhiDataList: [
        {
          img: require('../../assets/biaohui/point.png'),
          text: '点'
        },
        {
          img: require('../../assets/biaohui/zhexian.png'),
          text: '折线'
        },
        {
          img: require('../../assets/biaohui/quxian.png'),
          text: '曲线'
        },
        {
          img: require('../../assets/biaohui/duobianxing.png'),
          text: '多边形'
        },
        {
          img: require('../../assets/biaohui/zhijiantou.png'),
          text: '直箭头'
        },
        {
          img: require('../../assets/biaohui/qujiantou.png'),
          text: '曲箭头'
        }
      ],
      isShowAssess: false, // 评估
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      // 资源信息
      dataListInfo: [],
      form: {
        name: ''
      },
      isShowCommand: false,
      checkList: ['1', '2'],
      isShowArrow: false,
      total: 40,
      pageSize: 10,
      currentPage: 1,
      keywords: null,
      tableData: [],
      addEventDialog: false,
      rowData: {},
      title: '',
      pointOverlay: null, // 弹框图层
      geoJsonData1: {},
      geoJsonData2: {}
    }
  },
  mounted() {
    this.getTable()
    this.getAreaPage('options1', 3)
    // 事件数量
    this.getEventTotal()
    this.$nextTick(() => {
      pointDiv = document.getElementById('popups')
      Bus.$on('getFeature', (obj) => {
        if (obj.feature) {
          console.log(obj.feature,'obj.feature');
          this.addOverlay(obj.evt.coordinate,obj.feature.values_.properties)
          // this.pointOverlay.setPositioning('bottom-left')
        }
      })
    })
  },
  methods: {
    rowClick(row, column, event){
      console.log(row,'row');
      if(row.geojson){
        this.closeOverlay()
        // 飞至对应点位
        const point = JSON.parse(row.geojson)
        mapUtils.flyPoint(point.coordinates, 8)
        // 地质
        if(row.eventType === '1' && this.geoJsonData1.features && this.geoJsonData1.features.length > 0) {
          this.geoJsonData1.features.forEach(item=>{
            if(item.id === row.id){
              const coordinate = JSON.parse(row.geojson).coordinates
              this.addOverlay(coordinate,item.properties)
            }
          })
        }else if(row.eventType === '2' && this.geoJsonData2.features && this.geoJsonData2.features.length > 0) { // 山洪
          this.geoJsonData2.features.forEach(item=>{
            if(item.id === row.id){
              const coordinate = JSON.parse(row.geojson).coordinates
              this.addOverlay(coordinate,item.properties)
            }
          })
        }
      }
    },
    addOverlay(coordinates,propertiesVal){
      console.log(coordinates,'coordinates');
      const coordinate = coordinates
      this.lonlat = propertiesVal
      this.form.name = this.lonlat.事件名称

      pointDiv.style.display = 'block'
      this.pointOverlay = new Overlay({
        element: pointDiv,
        id: 'toolTipBox2',
        positioning: 'center-center', // 一定要加上，否则会有偏移
        className: 'overlay-test',
        autoPanMargin: 20, // 设置自动平移边距
        autoPan: {
        // 如果弹框显示不全则自动归位
          animation: {
            duration: 250
          }
        }
      })
      this.pointOverlay.setPosition(coordinate)
      mapUtils.getMap().addOverlay(this.pointOverlay)
    },
    searchBtn() {
      this.getTable()
      this.getEventTotal()
    },
    selectChange(val) {
      if (!val) {
        this.value2 = ''
      }
      this.geomText = this.options1.filter(item => item.adcode === val)
      this.getAreaPage('options2', 4, val)
    },
    getAreaPage(listName, level, val) {
      const params = {
        level: level,
        padcode: val
      }
      resourceAPI.areaPage(params).then((res) => {
        if (res.code === 200) {
          this[listName] = res.data
        }
      })
    },
    selectChangeRegion(val) {
      this.geomText = this.options2.filter(item => item.adcode === val)
    },
    getEventTotal() {
      const data = {
        geomText: this.geomText && this.geomText.length ? this.geomText[0].geom : null
      }
      API.getEventTotal(data).then((res) => {
        if (res.code === 200) {
          this.form = res.data
        }
      })
    },
    // 应急标绘
    plotting(value) {
      // const layers = mapUtils.getMap().getLayers().getArray()
      // const layer = layers.filter(item => item.values_.layerId === 'drawId')
      // if (layer) {
      //   layer.forEach(item => {
      //     mapUtils.getMap().removeLayer(item)
      //   })
      // }
      if (value === '点') {
        mapUtils.addInteraction('Point', 'biaohuiPoint', true)
      } else if (value === '折线') {
        mapUtils.addInteraction('LineString', 'biaohuiLineString', true)
      } else if (value === '曲线') {
        mapUtils.addInteraction('curve', 'biaohuicurve', true)
      } else if (value === '多边形') {
        mapUtils.addInteraction('Polygon', 'biaohuiPolygon', true)
      } else if (value === '直箭头') {
        mapUtils.addInteraction('lineArrow', 'biaohuiLineArrow', true)
      } else if (value === '曲箭头') {
        mapUtils.addInteraction(
          'curveLineArrow',
          'biaohuicurveLineArrow',
          true
        )
      }
    },
    // 评估
    assess() {
      if (this.pointOverlay) {
        this.closeOverlay()
      }
      if (this.form.radius) {
        var a = /^\d+(?=\.{0,1}\d+$|$)/
        if(!a.test(this.form.radius)){
          return this.$message.error('请输入正数！')
        }
        const lonlat = [Number(this.lonlat.经度), Number(this.lonlat.纬度)]
        // 展示圆
        mapUtils.drawCircle('circleRadius', lonlat, this.form.radius)
        this.isShowAssess = true
        const params = {
          centerPointLng: this.lonlat.经度,
          centerPointLat: this.lonlat.纬度,
          radius: this.form.radius
        }
        API.getInfoInCircle(params).then(res => {
          if (res.code === 200) {
            this.dataListInfo = []
            for (const key in res.data) {
              this.dataListInfo.push({
                key: key,
                value: res.data[key]
              })
            }
            // console.log(this.dataListInfo, 'this.dataListInfo')
          }
        })
      } else {
        return this.$message.warning('请选择半径')
      }
    },
    // 生成路线
    generatingRoute(item) {
      if (!this.form.radius) {
        this.$message.warning('请选择半径')
        return false
      }
      let obj = []
      const lonlat = [Number(this.lonlat.经度), Number(this.lonlat.纬度)]
      mapUtils.getMap().getView().animate({
        center: lonlat,
        zoom: 16,
        duration: 1000 // 飞行时间
      })
      const params = {
        orig: this.lonlat.经度 + ',' + this.lonlat.纬度,
        dest: item.point,
        style: '0'
      }
      API.getLinePlanning(params).then(res => {
        if (res.code === 200) {
          obj = [{ geometry: res.data }]
          mapUtils.addMoreLine('generatingRoute', obj)
        }
      })
    },
    clear() {
      this.form.radius = ''
      const ids = ['circleRadius', 'generatingRoute']
      ids.forEach((item) => {
        mapUtils.removeLayers(item)
      })
      this.dataListInfo = []
    },
    goback() {
      this.isShowCommand = false
      this.isShowAssess = false
      this.showLeftContent()
      this.clear()
      this.dataListInfo = []
    },
    command() {
      this.isShowCommand = true
      this.showLeftContent()
    },
    closeOverlay() {
      console.log(this.pointOverlay,'this.pointOverlay');
      if(this.pointOverlay) {
        this.pointOverlay.setPosition(undefined)
      }
    },
    getTable() {
      const data = {
        geomText: this.geomText && this.geomText.length ? this.geomText[0].geom : null,
        name: this.keywords,
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        orderByColumn:'update_time',
        isAsc:'descending'
      }
      API.getListPageEvent(data).then((res) => {
        if (res.code === 200) {
          if (res.code === 200) {
            this.tableData = res.data.records
            this.total = res.data.total
            this.getMapGeojson1()
            this.getMapGeojson2()
          }
        }
      })
    },
    getMapGeojson1() {
      const data = {
        name: this.keywords,
        geomText: this.geomText && this.geomText.length ? this.geomText[0].geom : null,
        eventType: '1'
      }
      API.getMapGeojson(data).then(res => {
        if (res.code === 200) {
          mapUtils.removeClusterLayer('dizhiCluster')
          if (res.data) {
            const obj = JSON.parse(res.data)
            console.log(obj)
            this.geoJsonData1 = obj
            mapUtils.addCluster('dizhiCluster', obj.features, dizhi, '#488efe')
          }
        }
      })
    },
    getMapGeojson2() {
      const data = {
        name: this.keywords,
        geomText: this.geomText && this.geomText.length ? this.geomText[0].geom : null,
        eventType: '2'
      }
      API.getMapGeojson(data).then(res => {
        if (res.code === 200) {
          mapUtils.removeClusterLayer('shanhongCluster')
          if (res.data) {
            const obj = JSON.parse(res.data)
            this.geoJsonData2 = obj
            mapUtils.addCluster('shanhongCluster', obj.features, shanhong, '#e33535')
          }
        }
      })
    },
    close() {
      const leftContent = this.$refs.emergency
      leftContent.style.transform = 'translateX(-100%)'
      this.isShowArrow = true
    },
    showLeftContent() {
      const leftContent = this.$refs.emergency
      leftContent.style.transform = 'translateX(0)'
      this.isShowArrow = false
    },
    handleSizeChange(val) {
      this.currentPage = 1
      this.pageSize = val
      this.getTable()
      this.getEventTotal()
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getTable()
      this.getEventTotal()
      console.log(`当前页: ${val}`)
    },
    // 编辑
    edit(row) {
      this.closeOverlay()
      this.addEventDialog = true
      this.title = '编辑事件'
      this.rowData = row
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 删除
    remove(row) {
      this.closeOverlay()
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          let ids
          if (row.id) {
            ids = row.id
            // console.log(ids, 'ids2')
          } else if (this.multipleSelection && this.multipleSelection.length > 0) {
            const id1 = this.multipleSelection.map(item => {
              return item.id
            })
            // console.log(this.multipleSelection, id1, 'id1')
            ids = id1.toString()
            // console.log(ids, 'ids1')
          }
          // console.log(ids, 'ids')
          API.removeEvent(ids).then(res => {
            if (res.code === 200) {
              this.$message.success(res.msg)
              this.getTable()
              this.getEventTotal()
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 新增事件
    addEvent() {
      this.closeOverlay()
      this.addEventDialog = true
      this.title = '新增事件'
    },
    handleClose() {
      this.addEventDialog = false
      this.getTable()
      this.getEventTotal()
    },
    checkboxGroup(checked, val) {
      if (val === 1) {
        // 显示
        if (checked) {
          mapUtils.showClusterLayerById('dizhiCluster')
        } else {
          // 隐藏
          mapUtils.hideClusterLayerById('dizhiCluster')
        }
      }
      if (val === 2) {
        // 显示
        if (checked) {
          mapUtils.showClusterLayerById('shanhongCluster')
        } else {
          // 隐藏
          mapUtils.hideClusterLayerById('shanhongCluster')
        }
      }
    },
    luxianClick(index) {
      this.activeIndex = index
      this.isShow = !this.isShow
      // console.log(this.$refs.icon[index].classList, 'this.$refs.icon[index]')
      if (this.isShow) {
        this.$refs.luxianRef[index].style.display = 'block'
        this.$refs.icon[index].classList.remove('el-icon-caret-top')
        this.$refs.icon[index].classList.add('el-icon-caret-bottom')
      } else {
        this.$refs.luxianRef[index].style.display = 'none'
        this.$refs.icon[index].classList.remove('el-icon-caret-bottom')
        this.$refs.icon[index].classList.add('el-icon-caret-top')
      }
    }
  },
  destroyed() {
    mapUtils.removeClusterLayer('dizhiCluster')
    mapUtils.removeClusterLayer('shanhongCluster')
  }
}
</script>

<style lang="scss" scoped>
.container-data {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  .emergency {
    position: absolute;
    top: 60px;
    left: 10px;
    z-index: 1;
    width: 485px;
    height: calc(100vh - 140px);
    background: rgba(3, 27, 54, 0.7);
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    border: 1px solid;
    border-image: linear-gradient(90deg, rgba(0, 48, 76, 1), rgba(0, 48, 76, 1))
      1 1;
    // transform: translateX(0);
    // transition: transform 0.6s ease; /* Adjust the transition speed */
    // box-shadow: 0px 2px 4px 2px rgba(0, 0, 0, 0.04);
    .leftHeader {
      display: flex;
      align-items: center;
      justify-content: space-between;
      text-align: left;
      width: 100%;
      height: 57px;
      line-height: 57px;
      background: #000000 url("@/assets/img/tjtitle.png") no-repeat;
      background-size: 100% 100%;
      .leftTitle {
        display: inline-block;
        font-size: 18px;
        font-weight: 500;
        color: #c3d4fd;
        text-indent: 60px;
        font-size: 20px;
        &.ffleftTitle {
          font-size: 14px;
        }
      }
      .el-icon-close {
        font-size: 20px;
        cursor: pointer;
        margin-right: 16px;
        color: #fff;
      }
    }
    .leftContent {
      width: calc(100% - 20px);
      padding: 0 10px;
      height: calc(100% - 0.77rem);
      padding-top: 0.2rem;
      .form-div {
        height: 2.4rem;
      }
      .topText {
        display: flex;
        justify-content: space-evenly;
        height: 35px;
        line-height: 35px;
        font-size: 18px;
        color: #2bb6cb;
      }
      .center-top {
        display: flex;
        justify-content: space-between;
        height: 60px;
        .center-left {
          width: 50%;
          text-align: center;
          color: #fff;
          .left-num {
            height: 30px;
            line-height: 30px;
            font-size: 18px;
            font-weight: bold;
          }
          .left-text {
            height: 30px;
            line-height: 30px;
            font-size: 16px;
          }
        }
        .center-right {
          width: 50%;
          text-align: center;
        }
      }
      .center-table {
        padding: 10px;
        width: calc(100% - 20px);
        max-height: calc(100% - 3.1rem);

        .search {
          margin-bottom: 10px;
          height: 32px;
          :deep(.el-input__inner) {
            font-size: 14px;
            height: 40px;
          }
        }
        .table {
          :deep(.el-table__body-wrapper) {
            max-height: 310px;
            overflow-y: auto;
          }
        }
      }
      .pagination {
        width: 100%;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
      }
    }
    .command {
      color: #fff;
      height: auto;
      .command-title {
        height: 35px;
        line-height: 35px;
      }
      .banjing {
        height: 35px;
        line-height: 35px;
      }
      .btn {
        height: 40px;
        display: flex;

        align-items: center;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-evenly;
        button {
          flex: 1;
        }
      }
      .contentLeft {
        display: block;
        .leftTitle {
          margin-left: 0;
        }
      }
    }
    .contentCenter {
      display: block;
      height: auto;

      border: none;
      .leftTitle {
        height: 50px;
        width: calc(100% - 16px);
        border-bottom: 1px solid #e4e9f0;
      }
      .content-table {
        padding: 0 10px;
        width: calc(100% - 20px);
        .bt {
          background: rgba(0, 0, 0, 0.3);
          color: rgba(255, 255, 255, 0.6);
        }
        .table {
          width: 100%;
          color: #fff;
          td{
              width: 30%;
              text-align: center;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
        }
        .tbody {
          border-top: none;
          .tr {
            border-bottom: 1px solid #000;
          }
        }
      }
      .table-tbody {
        max-height: 2.18rem;
        overflow-y: auto;
        &::-webkit-scrollbar {
          /* 取消滚动条宽度 */
          width: 0px !important;
        }
        .box{
          .box-key{
            padding-left: 0.1rem;
            cursor: pointer;
            height: 0.25rem;
            line-height: 0.25rem;
            &:hover{
              background: rgba(0, 0, 0, 0.1);
            }
          }
          .allBox{
            display: block;
            .box-value{
              height: 0.25rem;
              line-height: 0.25rem;
              display: flex;
              justify-content: space-around;
              align-items: center;
              &:hover{
                background: rgba(0, 0, 0, 0.1);
              }
              .name,
              .distance,
              .luxian{
                width: 30%;
                text-align: center;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }
              .luxian{
                cursor: pointer;
                color:#3a8ee6
              }
            }
          }
        }
      }
    }
    .contentbto {
      display: block;
      height: auto;
      border: none;
      padding-top: 0px;
      .leftTitle {
        width: calc(100% - 16px);
        border-bottom: 1px solid #e4e9f0;
      }
      .bto-huizhi {
        display: flex;
        cursor: pointer;
        justify-content: space-evenly;
        margin: 10px;
        .huizhi {
          width: 72px;
          height: 72px;
          text-align: center;
          color: #fff;
          background: rgba(246, 249, 255, 0.05);
          box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.11);
          border-radius: 10px 10px 10px 10px;
          img {
            width: 36px;
            height: 36px;
            display: block;
            margin: 0 auto;
            margin-top: 10px;
          }
          p {
            height: 35px;
          }
        }
      }
    }
  }
  .search-input {
    background: linear-gradient(90deg, #031b36 0%, rgba(3, 28, 51, 0.3) 100%);
    box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.5);
    width: 487px;
    height: 40px;
    position: absolute;
    left: 10px;
    top: 10px;
    display: flex;
    margin-bottom: 0.1rem;
    justify-content: space-between;
    :deep(.el-input__inner) {
      color: #fff;
      font-size: 14px;
      height: 40px;
      // background: linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0.8) 100%);
    }
  }
  .right-arrow {
    position: absolute;
    top: 50%;
    left: 0;
    font-size: 50px;
    transform: translateY(-27px);
    width: 50px;
    height: 54px;
    line-height: 54px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
  }
  .lengend {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 140px;
    height: 99px;
    padding: 20px;
    background: rgba(3, 27, 54, 0.5);
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    border: 1px solid;
    border-image: linear-gradient(90deg, rgba(0, 48, 76, 1), rgba(0, 48, 76, 1))
      1 1;
    color: #fff;
    .title {
      height: 30px;
      font-size: 16px;
    }
    :deep(.el-checkbox) {
      display: block;
      height: 30px;
      color: #fff;
      display: block;
      font-size: 16px;
      .el-checkbox__input.is-checked + .el-checkbox__label {
        color: #fff;
      }
    }
  }
  .popups {
    background: rgba(3, 27, 54, 0.7);
    border: 1px solid rgba(3, 27, 54, 0.7);

    border-radius: 10px;

    font: italic bold 12px;
    min-width: 30px;
    position: absolute;
    bottom: 15px;
    left: -100px;
    display: none;
    z-index: 4;
    color: #fff;
    .title-top {
      width: 326px;
      height: 46px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #000000 url("@/assets/img/tjtitle.png") no-repeat;
      background-size: 100% 100%;
      .left {
        text-indent: 40px;
      }
      .el-icon-close {
        font-size: 20px;
        cursor: pointer;
      }
    }
    .center {
      padding: 15px;
      .name {
        color: #a2bbd6;
        height: 35px;
        line-height: 35px;
        :deep(.el-button) {
          text-decoration: underline;
          margin-left: 10px;
        }
      }
    }
  }
}
.title-two {
  color: #fff;
  display: flex;
  align-items: center;
  height: 16px;
  line-height: 16px;
  margin: 20px 0px;
  .line {
    width: 2px;
    height: 16px;
    background: linear-gradient(180deg, #b5dff4 0%, #0187eb 100%);
    border-radius: 19px 19px 19px 19px;
    opacity: 1;
    margin-right: 10px;
  }
}
:deep(.el-tree-node__label) {
  color: #fff;
}
:deep(.el-form-item__label) {
  color: rgba(163, 179, 190, 1);
}
:deep(.el-input__inner) {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6px 6px 6px 6px;
  opacity: 1;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 1);
}

/*最外层透明*/
:deep(.el-table),
:deep(.el-table__expanded-cell) {
  background-color: transparent;
}
/* 表格内背景颜色 */
:deep(.el-table th),
:deep(.el-table tr),
:deep(.el-table td) {
  background-color: transparent;
  color: #c9e9ff;
  height: 30px;
}
:deep(.el-table thead) {
  color: #7ec1ff;
  font-size: 14px;
}
:deep(.el-table--enable-row-hover) {
  background-color: transparent;
}
:deep(.el-table .warning-row) {
  background: rgba(51, 91, 127, 0.6);
}
:deep(.el-table) {
  --el-table-border-color: rgba(51, 91, 127, 0.6) !important;
}
:deep(.el-table tbody tr:hover > td) {
  background: rgba(51, 91, 127, 0.4) !important;
}
:deep(.el-table td.el-table__cell),
:deep(.el-table th.el-table__cell.is-leaf) {
  border-bottom: none;
}
.el-table--border::after,
.el-table--group::after,
.el-table::before {
  display: none;
}
:deep(.el-pager li) {
  background: none;
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);
  border-radius: 2px 2px 2px 2px;
  opacity: 1;
  border: 1px solid;
  border-image: linear-gradient(
      180deg,
      rgba(76, 154, 216, 1),
      rgba(5, 84, 166, 1),
      rgba(77, 155, 217, 1)
    )
    1 1;
  color: #fff;
}
:deep(.el-pagination button:disabled) {
  background: linear-gradient(180deg, rgba(3, 74, 174, 0.2) 0%, #034aae 100%);
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);
  border-radius: 2px 2px 2px 2px;
  opacity: 1;
  border: 1px solid;
  border-image: linear-gradient(
      180deg,
      rgba(76, 154, 216, 1),
      rgba(5, 84, 166, 1),
      rgba(77, 155, 217, 1)
    )
    1 1;
  color: #fff;
}
:deep(.el-pagination .btn-next),
:deep(.el-pagination .btn-prev) {
  background: linear-gradient(180deg, rgba(9, 102, 169, 0.2) 0%, #0965a8 100%);
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);
  border-radius: 2px 2px 2px 2px;
  opacity: 1;
  border: 1px solid;
  border-image: linear-gradient(
      180deg,
      rgba(111, 222, 252, 1),
      rgba(1, 124, 202, 1),
      rgba(103, 214, 247, 1)
    )
    1 1;
  color: #fff;
}
:deep(.el-pager li.active) {
  background: linear-gradient(180deg, rgba(9, 102, 169, 0.2) 0%, #0965a8 100%);
}
:deep(.el-pagination__jump) {
  color: #fff;
}
:deep(.el-pagination__total) {
  color: #fff;
}
.inputbtn {
  background: linear-gradient(135deg, #2270d4 0%, #002689 100%);
  border-radius: 0px 4px 4px 0px;
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
}
.btn-inputbtn{
  width: auto;
  text-align: unset;
  line-height: unset;
}
:deep(.el-input-group__append) {
  background: none;
  border: none;
  color: #fff;
  font-size: 20px;
  width: 40px;
  height: 40px;
  padding: 0px;
}
:deep(.el-checkbox__label) {
  img {
    vertical-align: middle;
  }
}
</style>
